<template>
    <div>
<div class="header">
     <div class="pink">
       <p>账户余额</p>
       <h1>
     ￥ {{user.balance}}
       </h1>
     </div>
     <div class="function">
       <p class="tubiao"><i class="el-icon-bank-card"></i></p>
       <p>充值</p>
       <p class="jiantou"><i class="el-icon-arrow-right"></i></p>
     </div>
       <div class="function">
       <p class="tubiao"><i class="el-icon-document"></i></p>
       <p>查看明细</p>
       <p class="jiantou2"><i class="el-icon-arrow-right"></i></p>
     </div>
    </div>
    </div>
</template>

<script>
import {User} from "../../api/index"
    export default {
        data(){
          return{
         user:[
           
         ]
          }
        },
        methods:{
          User(){
							User({userId:this.$store.state.uid}).then(res =>{
								console.log(res,"resYu");
						
								this.user = res.data.data
								// console.log(this.user,"user");
							})
					}
        },
			mounted(){
				this.User()
			}
    }
</script>

<style scoped>
 .tiao{
   position: absolute;
      top: 3vh;
    left: 4vw;
    font-weight: bold;
    color: #409EFF;
    font-size: 24px;
 }
 .pink{
   width: 100vw;
   height: 18vh;
   background:  linear-gradient(#409EFF, #b4d7fa);
   color: #fff;
   overflow: hidden;
 }
 .pink p{
   margin-top: 3vh;
   margin-left: 2vw;
   font-size: 2vh;
 }
 .pink h1{
   margin-left: 20vw;
 }
 .function{
   border-bottom: 1px solid #eee;
   height: 6vh;
   /* background: cornflowerblue; */
   line-height: 6vh;
   display: flex;
   font-weight: normal;
 }
 .tubiao{
   font-size: 4vh;
   text-indent: 3vw;
 }
 .jiantou{
  margin-left: 68.5vw;
}
.jiantou2{
  margin-left: 60vw;
}
</style>